<template>
    <el-row :gutter="20" justify="center" class="margin-top">
        <el-col :span="20" :offset="0" class="from">
            <el-row :gutter="20" justify="center">
                <el-col :span="14">
                    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" status-icon>
                        <el-form-item class="input-margin" prop="phone">
                            <el-input autocomplete="off" v-model="ruleForm.phone" placeholder="请输入手机号">
                                <template #prepend>
                                    <el-icon>
                                        <User />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item class="input-margin" prop="pwd">
                            <el-input autocomplete="off"  type="password" v-model="ruleForm.pwd" placeholder="请设置登录密码">
                                <template #prepend>
                                    <el-icon>
                                        <Lock />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item class="input-margin" prop="pwd2">
                            <el-input autocomplete="off" type="password" v-model="ruleForm.pwd2" placeholder="请确认登录密码">
                                <template #prepend>
                                    <el-icon>
                                        <Lock />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="danger" size="large" class="zhuce" @click="submitForm">立即注册</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>

            </el-row>


        </el-col>

    </el-row>


</template>

 <script setup>
import { reactive, ref } from 'vue'
let ruleForm = reactive({
    phone: "",
    pwd: "",
    pwd2: ""
})
const reg_tel_phone=ref(/(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/)
let ruleFormRef = ref(null)
const rules = reactive({
    phone: [
        {pattern:reg_tel_phone,message:'请输入正确的手机号',trigger: 'blur'},
        { required: 'true',pattern:reg_tel_phone, message: '手机号不能为空', trigger: 'blur' }
    ],
    pwd: [
        { required: 'true', message: '密码不能为空', trigger: 'blur' }
    ],
    pwd2: [
        { required: 'true', message: '确认密码不能为空', trigger: 'blur' }
    ]

})
const submitForm = async () => {
    if (!ruleFormRef) return;
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            console.log(ruleFormRef)
        } else {
            return false
        }
    })
}
</script> 

<style scoped>
.zhuce {
    width: 478px;
}

.input-margin {
    margin-bottom: 20px
}

.from {
    background-color: #fff;
    padding: 50px 0px;
}

.margin-top {
    margin: 70px 0px;
}
</style>